<template>
    <div class="page">
        <breadcrumb></breadcrumb>
        <div class="box">
            <div class="title">
                个人设置
            </div>
            <div class="main">
                <el-form class="formStyle" ref="form" :model="form" label-width="121px">
                    <el-form-item label="个人头像">
                        <el-upload class="avatarUploader" :action="url" :show-file-list="false" :headers="headers"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <el-image v-if="form.avatar" :src="form.avatar" class="avatar" :fit="'cover'"></el-image>
                            <div v-else class="avatarBg"></div>

                            <div class="UploaderRight">
                                <div class="text">格式要求 </div>
                                <div class="text">PNG、JPG/JPRG</div>
                            </div>
                            <el-button slot="trigger" size="small" type="primary" class="uploadBtn">上传图片</el-button>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="账号">
                        <el-input class="input" size="small" v-model="form.userName" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input class="input" size="small" v-model="form.nickName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input class="input" size="small" v-model="form.phoneNumber" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="修改密码">
                        <el-radio-group v-model="form.isPass">
                        	<el-radio label="1" value="1">是</el-radio>
                        	<el-radio label="0" value="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="原密码" v-if="form.isPass==1">
                        <el-input class="input" size="small" v-model="form.usedPassword" ></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" v-if="form.isPass==1">
                        <el-input class="input" size="small" v-model="form.newPassword" ></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" v-if="form.isPass==1">
                        <el-input class="input" size="small" v-model="form.confirmPassword" ></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="footer">
            <el-button class="cancelBtn" @click="$router.push('/operationManagement/coupon')">取消</el-button>
            <el-button class="submitBtn" @click="saveSeting" :disabled="loading">保存</el-button>
        </div>


    </div>
</template>
  
<script>
import breadcrumb from "@/components/breadcrumb";
import BaseUrl from "@/http/BaseUrl";
import store from "@/store";
import httpApi from "@/http";
export default {
    data() {
        return {
            url: BaseUrl.UPLOADURL + "/file/upload",
            headers: {
                Authorization: localStorage.getItem("token"),
            },
            form: {
                avatar: "",
                userName: "",
                nickName: "",
                phoneNumber: "",
                email: "",
				isPass:"0",
				usedPassword:"",
				newPassword:"",
				confirmPassword:""
            },
            loading:false,


        }
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.form.avatar = res.data.url;
        },
        beforeAvatarUpload(file) {
            // console.log("文件格式", file);

            const isJPG = file.type === "image/jpeg";
            const isPng = file.type === "image/png";
            const isJpeg = file.type === "image/jpeg";

            const isLt2M = file.size / 1024 / 1024 < 5;

            if (!isJPG && !isPng && !isJpeg) {
                this.$message.error("上传头像图片只能是 JPG/png/jpeg 格式!");
                return false;
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片不能超过 5MB!");
                return false;
            }
            // console.log("条件", (isJPG || isPng || isJpeg) && isLt2M);
            return (isJPG || isPng || isJpeg) && isLt2M;
        },
        // 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
        InitInfo() {
            // this.form.avatar = store.state.avatar
            // this.form.userName = store.state.userName
            // this.form.nickName = store.state.nickName
            // this.form.phoneNumber = store.state.phoneNumber
            // this.form.email = store.state.email
            httpApi.loginApi.getUserInfo().then((res) => {
                if (res.data.code == 200) {
                    this.form.avatar = res.data.data.avatar
                    this.form.userName = res.data.data.userName
                    this.form.nickName = res.data.data.nickName
                    this.form.phoneNumber = res.data.data.phoneNumber
                    this.form.email = res.data.data.email
                }
            });
        },
        saveSeting(){
            if(this.loading==true){
                return
            }
			if(this.form.isPass==1){
				if(this.form.usedPassword==""){
					this.$message.error('原密码不能为空')
					return false;
				}
				if(this.form.newPassword==""){
					this.$message.error('新密码不能为空')
					return false;
				}
				if(this.form.confirmPassword==""){
					this.$message.error('请确认密码')
					return false;
				}
			}
            this.loading=true
            let params={
                avatar:this.form.avatar,
                nickName:this.form.nickName,
				isPass:this.form.isPass,
				usedPassword:this.form.usedPassword,
				newPassword:this.form.newPassword,
				confirmPassword:this.form.confirmPassword
                // email:this.form.nickName,
            }
            httpApi.loginApi.personalSettingsUpdate(params).then(res=>{
                console.log(res);
                if(res.data.code==200){
                    this.$message.success('修改个人设置成功')
                    /* location.reload(); */
                    // this.$router.go(-1);
                    
                }
                this.loading=false
            })
        },
        




    },

    created() {

    },
    mounted() {
        this.InitInfo()

    },
    components: {
        breadcrumb,
    },
};
</script>
  
<style lang="scss" scoped>
.page {
    position: relative;
    height: calc(100vh - 97px)
}

.box {
    height: calc(100vh - 187px);
    background-color: #fff;
    overflow-y: scroll;

    .title {
        background-color: #fff;
        font-size: 16px;
        line-height: 50px;
        color: #262626;
        font-weight: bold;
        border-bottom: 1px solid #f0f0f0;
        padding-left: 24px;
    }

    .main {
        padding-top: 36px;

        .formStyle {
            ::v-deep .el-form-item__label {
                font-size: 12px;
                color: #262626;

            }

            .avatarUploader {
                display: flex;
                align-items: center;
                position: relative;


                .UploaderRight {
                    margin-left: 21px;
                    margin-bottom: 36px;

                    .text {
                        line-height: 16.5px;
                        color: #949494;
                        font-size: 12px;


                    }
                }

                .uploadBtn {
                    height: 28px;
                    position: absolute;
                    left: 106px;
                    top: 48px;

                }

                .avatar {
                    width: 85px;
                    height: 85px;
                    border-radius: 50%;
                }

                .avatarBg {
                    width: 85px;
                    height: 85px;
                    border-radius: 50%;
                    background-color: #f0f0f0;
                }
            }





            .input {
                width: 639px;

            }
        }







    }
}

.footer {
    width: calc(100vw - 208px);
    position: absolute;
    left: -16px;
    bottom: -16px;
    height: 60px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;

    .cancelBtn {
        height: 36px;
        width: 80px;
        border-radius: 4px;
        color: #262626;
        font-size: 12px;
        transition: 0.2s;

        &:hover {
            color: #1890FF;
        }


    }

    .submitBtn {
        height: 36px;
        border-radius: 4px;
        background-color: #1890FF;
        width: 80px;
        color: #fff;
        font-size: 12px;
        transition: 0.2s;

        &:hover {
            opacity: 0.8;
        }
    }

}
</style>
  